import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import styles from './index.module.scss'
import WeekDays from './components/WeekDays'
import Card from './components/Card'

import iconTimeSuccess from '@/static/icons/time-success.svg'
import iconFire from '@/static/icons/fire.svg'
import iconFavorite from '@/static/icons/Favorite.svg'
import imgtodoCompletedImg from '@/static/fake/todo-completed-img.png'
import imgProgress1 from '@/static/fake/progress-1.png'
import imgProgress2 from '@/static/fake/progress-2.png'
import imgRehabConsumeGraph from '@/static/fake/rehab-consume-graph.svg'
import useGetCahrt from '@/hooks/useGetCahrt'
import { useEffect } from 'react'
import { getRealtime } from '@/apis/realtime'

export default function Index() {
    const handleClick = () => {
        Taro.navigateTo({ url: '/subPages/rehabProgress/index' })
    }

    const timeOption = {
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true,
        },
        xAxis: {
            type: 'time',
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#BDD1E9',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#DBE5EC',
                    type: 'dashed',
                },
            },
            z: 2,
            axisLabel: {
                color: '#828282',
                textStyle: {
                    fontWeight: 'normal',
                },
            },
            splitNumber: 3,
            max: (v) => {
                return v.max + 30 * 60 * 1000
            },
        },
        yAxis: {
            show: false,
            type: 'category',
            data: ['aad'],
        },
        series: [
            {
                z: 0,
                silent: false,
                type: 'bar',
                data: [
                    new Date('2023-05-08 08:00:00').getTime(),
                    new Date('2023-05-08 08:15:00').getTime(),
                ],
                itemStyle: {
                    borderRadius: 10,
                    color: '#2f3e75',
                },
            },
        ],
    }

    const heartOption = {
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 10,
            containLabel: true,
        },
        xAxis: {
            type: 'time',
            axisLine: { show: false },
            axisTick: { show: false },
            formatter: 'HH:mm',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#BDD1E9',
                    width: 2,
                },
            },
            axisLabel: {
                formatter: '{HH}:{mm}',
            },
        },
        yAxis: {
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#BDD1E9',
                    width: 2,
                },
            },
            axisLabel: {
                formatter: function (value, index) {
                    if (index == 2) {
                        return '高'
                    } else if (index == 1) {
                        return '中'
                    } else if (index == 0) {
                        return '低'
                    }
                },
            },
            splitNumber: 1,
        },
        series: [
            {
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                data: [
                    [new Date('2023-05-09 08:00'), 0],
                    [new Date('2023-05-09 08:40'), 0],
                    [new Date('2023-05-09 08:45'), 0],
                ],
                itemStyle: {
                    color: '#ea4459',
                },
            },
        ],
    }

    const [timeEc, updateTimeEc] = useGetCahrt(timeOption)
    const [heartEc, updateHeartEc] = useGetCahrt(heartOption)

    // 获取心率数据
    useEffect(() => {
        const getData = async () => {
            const res = await getRealtime()
            const array = res.data.reduce((pre, cur) => {
                pre.push([
                    new Date(parseInt(cur.time)),
                    parseInt(cur.heartrate),
                ])
                return pre
            }, [])
            setTimeout(() => {
                updateHeartEc(array)
                console.log('ok')
            }, 1000)
            // updateHeartEc(array)
        }
        getData()
    }, [])
    return (
        <View className={styles.container}>
            <WeekDays />
            {/* 大的进度条 */}
            <View className={styles.bigProgress} onClick={() => handleClick()}>
                <View className={styles.bigProgressNum}>
                    <View className={styles.bigProgressNumVal}>5</View>
                    <View className={styles.bigProgressNumPersant}>%</View>
                </View>
                <View className={styles.bigProgressTitle}>恢复进程</View>
                <View className={styles.bigProgressSubTitle}>
                    预计3周可以恢复到正常水平
                </View>
            </View>
            {/* 进度条 */}
            <View className={styles.progress}>
                <View>
                    <Image src={imgtodoCompletedImg} />
                </View>
                <View
                    className={styles.progressItem}
                    style={{
                        backgroundImage: `url(${imgProgress1})`,
                    }}
                >
                    <View className={styles.progressItemNum}>88%</View>
                    <View className={styles.progressItemText}>训练时长</View>
                </View>
                <View
                    className={styles.progressItem}
                    style={{
                        backgroundImage: `url(${imgProgress2})`,
                    }}
                >
                    <View className={styles.progressItemNum}>75%</View>
                    <View className={styles.progressItemText}>关节灵活度</View>
                </View>
                <View
                    className={styles.progressItem}
                    style={{
                        backgroundImage: `url(${imgProgress2})`,
                    }}
                >
                    <View className={styles.progressItemNum}>63%</View>
                    <View className={styles.progressItemText}>肌肉力量</View>
                </View>
            </View>
            <View className={styles.card}>
                <Card
                    title='康复时长'
                    iconLeft={<Image className='icon' src={iconTimeSuccess} />}
                    iconRight={
                        <View className={styles.cardInfo}>
                            <Text className={styles.blue}>15</Text> Min{' '}
                            <Text className={styles.blue}>00</Text> Sec
                        </View>
                    }
                >
                    <View style={{ height: '150rpx' }}>
                        {/* @ts-ignore */}
                        <ec-canvas
                            id='mychart-dom-bar'
                            canvas-id='mychart-bar'
                            ec={timeEc}
                            forceUseOldCanvas
                        />
                    </View>
                </Card>
            </View>
            <View className={styles.card}>
                <Card
                    title='康复消耗'
                    iconLeft={<Image className='icon' src={iconFire} />}
                    iconRight={
                        <View className={styles.cardInfo}>
                            <Text className={styles.blue}>51</Text> kcal
                        </View>
                    }
                >
                    <Image
                        style={{ width: '100%' }}
                        src={imgRehabConsumeGraph}
                        mode='widthFix'
                    />
                </Card>
            </View>
            <View className={styles.card}>
                <Card
                    title='运动心率'
                    iconLeft={<Image className='icon' src={iconFavorite} />}
                    iconRight={
                        <View className={styles.cardInfo}>
                            <Text className={styles.blue}>87</Text> bpm
                        </View>
                    }
                >
                    <View style={{ height: '150rpx' }}>
                        {/* @ts-ignore */}
                        <ec-canvas
                            id='mychart-dom-bar'
                            canvas-id='mychart-bar'
                            ec={heartEc}
                            forceUseOldCanvas
                        />
                    </View>
                </Card>
            </View>
        </View>
    )
}
